<!-- 快捷菜单/图标区域 -->
<section class="max-w-screen-xl mx-auto px-4 py-12 md:py-16">
    <div class="grid grid-cols-2 md:grid-cols-5 gap-6 md:gap-8">
        <% menus.forEach(function(menu) { %>
            <a href="<%= menu.url %>"
               class="group flex flex-col items-center text-center p-4 transition duration-300 hover:opacity-80">
                <div class="w-16 h-16 md:w-20 md:h-20 mb-3 flex items-center justify-center">
                     <% if (menu.icon && menu.icon.startsWith('fa')) { %>
                        <i class="<%= menu.icon %> text-4xl md:text-5xl text-gray-700 group-hover:text-gray-900"></i>
                     <% } else if (menu.icon) { %>
                         <img src="<%= menu.icon %>" alt="<%= menu.name %>" class="w-12 h-12 md:w-16 md:h-16 object-contain">
                     <% } else { %>
                         <i class="fas fa-star text-4xl md:text-5xl text-gray-700 group-hover:text-gray-900"></i> <!-- 默认图标 -->
                     <% } %>
                </div>
                <span class="text-sm md:text-base font-medium text-gray-700 group-hover:text-gray-900">
                    <%= menu.name %>
                </span>
            </a>
        <% }); %>
    </div>
</section>